<template>
  <div>
    <div
      class="flex-center banner-box bg-[url('~/assets/images/solution/homescreen_banner.png')] bg-cover bg-no-repeat">
      <div class="banner-con">
        <h1 class="banner-main-title">自建房安全隐患排查系统</h1>
        <p class="banner-text xl:w-[37vw] mt-10">
          联合智为“自建房安全隐患排查系统”，包括PC端政府监管平台及移动小程序两大应用，功能互通，各有侧重。可对房屋所在区域、房屋结构、房屋性质、手续办理情况、改扩建情况、是否存在安全隐患及隐患类型、房屋整治情况等信息进行全面统计筛查汇总，通过责任到人的多级排查机制，确保数据真实有效，实现对房屋安全隐患进行“地毯式大摸底”，做到一栋不漏、一户不落。
        </p>
      </div>
    </div>

    <div class="pt-[90px] pb-[67px]">
      <div class="module-con flex flex-col md:flex-row">
        <div class="flex-1 mb-12 md:mb-0">
          <h3 class="text-2xl w-fit z-10 leading-4 text-[#1393FF] border-b-4 border-[#FFB70A]">
            PC端政府监管平台
          </h3>
          <p class="text-sm text-[#616666] mt-4">主管部门可对辖区所有排查数据进行全面监管，<br />
            逐级权限管理，确保信息安全。</p>
          <img class="w-full h-auto mt-18" src="../../assets/images/solution/homescreen_pc.png" />
        </div>
        <div class="flex-1 md:ml-12">
          <h3 class="text-2xl w-fit z-10 leading-4 text-[#1393FF] border-b-4 border-[#FFB70A]">
            移动小程序
          </h3>
          <p class="text-sm text-[#616666] mt-4">给各级排查人员分配系统子账号，专人专号管理，通过系统快速录入排查信息，<br />
            操作便捷，办事高效。</p>
          <div class="flex items-center">
            <img class="w-1/2 h-auto mt-6" src="../../assets/images/solution/homescreen_phone_01.png" />
            <img class="w-1/2 h-auto mt-1" src="../../assets/images/solution/homescreen_phone_02.png" />
          </div>
        </div>
      </div>
    </div>

    <div class="pt-[70px] pb-20 bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">系统功能</h2>
        <div class="flex flex-wrap mt-10 justify-around">
          <div v-for="(item, ind) in traitList" :key="ind"
            class="w-[380px] h-[313px] bg-[#FFFFFF] mb-6 px-7 relative flex-center flex-col rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]">
            <img alt="自建房安全隐患排查系统" class="inline-block w-[103px] h-[103px]" :src="
              require(`../../assets/images/solution/homescreen_0${ind + 1}.png`)
            " />
            <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
            <p class="mt-[18px] text-[#828282] text-sm leading-6">
              {{ item.content }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-[#FBFBFB] py-[84px]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">系统价值</h2>
        <img class="w-full mt-10" src="../../assets/images/solution/homescreen_trait_01.png" />
        <div class="flex  md:flex-row flex-col">
          <div
            class="flex-1 h-[283px] text-white py-12 relative px-18 bg-[url(~/assets/images/solution/homescreen_trait_02.png)]">
            <img class="w-10 h-10" src="../../assets/images/solution/homescreen_icon_01.png" />
            <p class="md:text-[26px] mt-6">工作效率倍增</p>
            <p class="mt-4 text-sm">所有信息实时分类保存，形成台账记录，一键导出数据，提升工作效率。</p>
          </div>
          <div
            class="flex-1 h-[283px] text-white py-12 relative px-18 bg-[url(~/assets/images/solution/homescreen_trait_03.png)]">
            <img class="w-10 h-10" src="../../assets/images/solution/homescreen_icon_02.png" />
            <p class="md:text-[26px] mt-6">管理权限清晰</p>
            <p class="mt-4 text-sm">权限逐级管理，加强对信息查阅权限和账号使用的规范化，确保信息安全。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '信息全面摸底',
          content:
            '可使用pc端政府监管平台或移动小程序，按要求录入辖区内所有房屋排查详细信息，实现信息全面排查摸底。',
        },
        {
          name: '隐患重点排查',
          content:
            '对存在安全隐患的房屋进行重点筛查，并建立单独排查台账，便于重点监督管理。',
        },
        {
          name: '监督整改效果',
          content:
            '通过系统监督限期整改进度及效果，形成闭环管理，将各类安全事故防范于未然。',
        },
        {
          name: '日报台账管理',
          content:
            '各级排查人员每日录入信息生成排查台账，形成自下而上每日汇报的长效信息报送机制，将整治工作下沉到一线。',
        },
        {
          name: '多级权限管理',
          content:
            '系统可给各级排查人员分配系统子账号，并设置多级权限管理，专人专号。',
        },
        {
          name: '数据云端储存',
          content: '所有数据云端储存，实时保存，便于后期溯源查找管理。',
        },
      ],
    }
  },
  head: {
    title: '自建房安全隐患排查系统-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '自建房安全隐患排查系统',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联合智为“自建房安全隐患排查系统”，包括PC端政府监管平台及移动小程序两大应用，功能互通，各有侧重。可对房屋所在区域、房屋结构、房屋性质、手续办理情况、改扩建情况、是否存在安全隐患及隐患类型、房屋整治情况等信息进行全面统计筛查汇总，通过责任到人的多级排查机制，确保数据真实有效，实现对房屋安全隐患进行“地毯式大摸底”，做到一栋不漏、一户不落。',
      },
    ],
  },
}
</script>

<style scoped>
.effect-item {
  width: 32%;
  @apply mb-6;
}
</style>
